<!DOCTYPE HTML>
<html>
<head>
	<title>pixi.js example 13 - Graphics</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #000000;
		}
	</style>
	
	<script src="../../bin/pixi.dev.js"></script>
	
</head>
<body>
	<script>

	// create an new instance of a pixi stage
	var stage = new PIXI.Stage(0xFFFFFF, true);
	
	stage.setInteractive(true);
	
	var renderer = PIXI.autoDetectRenderer(620, 380);
	
	renderer.view.style.display = "block";
	 
	// add render view to DOM
	document.body.appendChild(renderer.view);
	
	var graphics = new PIXI.Graphics();
	
	// set a fill and line style
	graphics.beginFill(0xFF3300);
	graphics.lineStyle(10, 0xffd900, 1);
	
	// draw a shape
	graphics.moveTo(50,50);
	graphics.lineTo(250, 50);
	graphics.lineTo(100, 100);
	graphics.lineTo(250, 220);
	graphics.lineTo(50, 220);
	graphics.lineTo(50, 50);
	graphics.endFill();
	
	// set a fill and line style again
	graphics.lineStyle(10, 0xFF0000, 0.8);
	graphics.beginFill(0xFF700B, 1);
	
	// draw a second shape
	graphics.moveTo(210,300);
	graphics.lineTo(450,320);
	graphics.lineTo(570,350);
	graphics.quadraticCurveTo(600, 0, 480,100);
	graphics.lineTo(330,120);
	graphics.lineTo(410,200);
	graphics.lineTo(210,300);
	graphics.endFill();
	
	// draw a rectangle
	graphics.lineStyle(2, 0x0000FF, 1);
	graphics.drawRect(50, 250, 100, 100);
	
	// draw a circle
	graphics.lineStyle(0);
	graphics.beginFill(0xFFFF0B, 0.5);
	graphics.drawCircle(470, 200,100);
	graphics.endFill();

	graphics.lineStyle(20, 0x33FF00);
	graphics.moveTo(30,30);
	graphics.lineTo(600, 300);
	

	stage.addChild(graphics);
	
	// let's create moving shape
	var thing = new PIXI.Graphics();
	stage.addChild(thing);
	thing.position.x = 620/2;
	thing.position.y = 380/2;
	
	var count = 0;
		

	// Just click on the stage to draw random lines
	stage.click = stage.tap = function()
	{

		graphics.lineStyle(Math.random() * 30, Math.random() * 0xFFFFFF, 1);
	    graphics.moveTo(Math.random() * 620,Math.random() * 380);
		graphics.bezierCurveTo(Math.random() * 620,Math.random() * 380, 
								Math.random() * 620,Math.random() * 380,
								Math.random() * 620,Math.random() * 380);
	}
	// run the render loop
	requestAnimFrame(animate);

	function animate() {
		
		thing.clear();
		
		count += 0.1;
		
		thing.clear();
		thing.lineStyle(10, 0xff0000, 1);
		thing.beginFill(0xffFF00, 0.5);
		
		thing.moveTo(-120 + Math.sin(count) * 20, -100 + Math.cos(count)* 20);
		thing.lineTo( 120 + Math.cos(count) * 20, -100 + Math.sin(count)* 20);
		thing.lineTo( 120 + Math.sin(count) * 20, 100 + Math.cos(count)* 20);
		thing.lineTo( -120 + Math.cos(count)* 20, 100 + Math.sin(count)* 20);
		thing.lineTo( -120 + Math.sin(count) * 20, -100 + Math.cos(count)* 20);
		
		thing.rotation = count * 0.1;
	    renderer.render(stage);
	    requestAnimFrame( animate );
	}

	</script>

	</body>
</html>
